import React, {useEffect, useState} from "react"
import MdEditor from 'for-editor'
import {SaveFile} from "./api";
import Counter from "../../mobx-store/index";


interface EditorProps {
    contents: string; // markdown文本内容
    height?: number; // 自主定义的高度
}

const Editor: React.FC<EditorProps> = (props: EditorProps) => {
    /** 默认工具栏按钮全部开启, 传入自定义对象
     例如: {
        h1: true, // h1
        code: true, // 代码块
        preview: true, // 预览
      }
     此时, 工具栏只显示此三个功能键（注：传入空对象则不显示工具栏）
     */
        // 工具栏菜单
    const toolbar = {
            h1: true, // h1
            h2: true, // h2
            h3: true, // h3
            h4: true, // h4
            img: true, // 图片
            link: true, // 链接
            code: true, // 代码块
            preview: true, // 预览
            expand: true, // 全屏
            /* v0.0.9 */
            undo: true, // 撤销
            redo: true, // 重做
            save: true, // 保存
            /* v0.2.3 */
            subfield: true, // 单双栏模式
        };

    // 保存Markdown文本内容
    const [mdContent, setMdContent] = useState('')
    const [thisHeight, setThisHeight] = useState(700)
    const [path, setPath] = useState('')
    const [timer, setTimer] = useState<any>(null); // 定时器





    /**
     * 渲染内容
     */
    useEffect(() => {
        setMdContent(props.contents)
    }, [props.contents, props.height])

    /**
     * 渲染显示高度
     */
    useEffect(() => {
        if (props.height) {
            setThisHeight(props.height)
        }
    }, [props.height])

    /**
     * 渲染路径
     */
    useEffect(() => {
        setPath(Counter.getPath())
    }, [Counter.path])


    /**
     * 上传图片
     * @param file
     */
    const uploadImg = async (file: any) => {
        console.log( file);
    }

    /**
     * 输入内容改变
     * @param value
     */
    const handleEditorChange = async (value: any) => {
        console.log('handleChange');
        setMdContent(value);
        clearTimeout(timer);
        // 创建一个新的定时器，在三分钟后执行 setMdContent
        const newTimer = setTimeout(async () => {
            const saveFileVo = {
                content: value,
                path: path
            }
            await SaveFile(saveFileVo)
        }, 3 * 60 * 1000);

        setTimer(newTimer);
    };
    /**
     * 渲染定时器
     */
    useEffect(() => {
        return () => {
            clearTimeout(timer); // 组件卸载时清除定时器
        };
    }, [timer]);


    // 保存输入内容
    const handleEditorSave = async (value: any) => {
        const saveFileVo = {
            content: value,
            path: path
        }
        await SaveFile(saveFileVo)
    }


    return (
        <MdEditor
            placeholder="请输入Markdown文本"
            lineNum={1} // 是否显示行号
            style={{height: thisHeight ? thisHeight : 800}}
            toolbar={toolbar}
            value={mdContent}
            onChange={handleEditorChange}
            onSave={handleEditorSave}
            addImg={uploadImg}
        />
    )
}
export default Editor
